import React, { Component, Fragment } from 'react'
import { Button, Card, Radio } from 'antd'
import { ContentWrap, CardWrap } from './ButtonStyle'
import {
  DownloadOutlined,
  SearchOutlined,
  PlusOutlined,
  FormOutlined,
  DeleteOutlined,
} from '@ant-design/icons'
class ButtonCompoent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      message: '按钮',
      loading: true,
      size: 'small',
    }
    this.changeLoading = this.changeLoading.bind(this)
    this.handleChange = this.handleChange.bind(this)
  }
  render() {
    return (
      <Fragment>
        <div>
          <ContentWrap>
            {/* 基础按钮 card */}
            <CardWrap>
              <Card title="按钮常用知识点">
                <p>统一外层都需要用Button标签</p>
                <p>形状用shape,图标用icon,loading在加载,disabled禁用</p>
                <p>大小用size,长度随父元素block</p>
              </Card>
            </CardWrap>
            {/* 基础按钮 card */}
            <CardWrap>
              <Card title="基础按钮">
                <Button type="primary" style={{ marginRight: '20px' }}>
                  按钮
                </Button>
                <Button type="default" style={{ marginRight: '20px' }}>
                  按钮
                </Button>
                <Button type="dashed" style={{ marginRight: '20px' }}>
                  按钮
                </Button>
                <Button type="danger" style={{ marginRight: '20px' }}>
                  按钮
                </Button>
                <Button disabled style={{ marginRight: '20px' }}>
                  禁用按钮
                </Button>
              </Card>
            </CardWrap>
            {/* 图形按钮 card */}
            <CardWrap>
              <Card title="按钮常用知识点">
                <Button
                  type="primary"
                  icon={<SearchOutlined />}
                  style={{ marginRight: '20px' }}
                >
                  搜索
                </Button>
                <Button
                  type="primary"
                  icon={<DownloadOutlined />}
                  style={{
                    marginRight: '20px',
                  }}
                >
                  下载
                </Button>
                <Button
                  type="primary"
                  icon={<PlusOutlined />}
                  style={{
                    marginRight: '20px',
                  }}
                >
                  添加
                </Button>
                <Button
                  type="primary"
                  icon={<FormOutlined />}
                  style={{
                    marginRight: '20px',
                  }}
                >
                  编辑
                </Button>
                <Button
                  type="primary"
                  icon={<DeleteOutlined />}
                  style={{
                    marginRight: '20px',
                  }}
                >
                  删除
                </Button>
              </Card>
            </CardWrap>
            {/*Loading按钮 */}
            <CardWrap>
              <Card title="Loading按钮">
                <Button
                  type="primary"
                  loading={this.state.loading}
                  style={{
                    marginRight: '20px',
                  }}
                >
                  确定
                </Button>
                <Button
                  type="primary"
                  shape="circle"
                  loading={this.state.loading}
                  style={{
                    marginRight: '20px',
                  }}
                ></Button>

                <Button
                  type="primary"
                  loading={this.state.loading}
                  style={{
                    marginRight: '20px',
                  }}
                >
                  点击加载
                </Button>

                <Button
                  loading={this.state.loading}
                  style={{
                    marginRight: '20px',
                  }}
                  shape="circle"
                ></Button>
                <Button type="primary" onClick={this.changeLoading}>
                  改变状态
                </Button>
              </Card>
            </CardWrap>
            {/* 基础按钮 card */}
            <CardWrap>
              <Card title="按钮平铺">
                <Button block type="primary">
                  按钮按照父元素宽度走
                </Button>
              </Card>
            </CardWrap>
            {/* 按钮尺寸 */}
            <CardWrap>
              <Card title="按钮尺寸">
                <Radio.Group
                  size={this.state.size}
                  onChange={this.handleChange}
                  value={this.state.size}
                >
                  <Radio value="small">小</Radio>
                  <Radio value="default">中</Radio>
                  <Radio value="large">大</Radio>
                </Radio.Group>
                <Button type="primary" size={this.state.size}>
                  确定
                </Button>
                <Button size={this.state.size}>取消</Button>
                <Button type="dashed" size={this.state.size}>
                  次要按钮
                </Button>
                <Button type="danger" size={this.state.size}>
                  危险
                </Button>
                <Button disabled size={this.state.size}>
                  禁止
                </Button>
              </Card>
            </CardWrap>
          </ContentWrap>
        </div>
      </Fragment>
    )
  }
  changeLoading() {
    let result = !this.state.loading
    this.setState({
      loading: result,
    })
  }
  handleChange(e) {
    let result = e.target.value
    this.setState({
      size: result,
    })
  }
}

export default ButtonCompoent
